SpaceX Roadster

Stereo Stereo Baseline (deg) Crosseye Parallel

Set time Date and Time (UTC)

Edit objects -- state vectors Object Reference object Name Color Shadow Label Trail Sub Z Mass Diameter Location (x,y,z) Velocity (x,y,z)

Edit objects -- orbital elements Object Reference object Name Color Shadow Label Trail Sub Z Mass Diameter a, e, i ω, Ω, MA

Time step 1024

Camera A Azimuth Altitude Distance + TL ML Axes 3d Kepler Trails Labels

Distance and speed Local time

Local time Sun Feb 11 2018 08:46:27 GMT-0500 (Eastern Standard Time) Local time

Coordinated Universal Time Sun Feb 11 2018 13:46:27 (UTC)

Julian Day 2458161.0739272567

Save as Simulation name: Keywords (optional) Description (optional) Author (optional) Share on orbitsimulator.com Create temporary link Your simulation is here: Source code:

<!DOCTYPE html>
<html id ='htmlAll'>
<head>
   <title>SpaceX Roadster</title>
   <meta name = 'keywords'    content = "Roadster 22018">
   <meta name = 'description' content = "Tesla SpaceX ">
   <meta name = 'author' content = 'Tony Dunn, Robjohn53'>
   <meta http-equiv="content-type" content="text/html; charset = UTF-8">

nav ul li:hover > ul {
		display: block;
	}

nav ul {z-index: 10; 
     font-family: Tahoma, Geneva, sans-serif; font-size: 20px;
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: fixed; top: -20px; left: 0px;
	//display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}

nav ul li:hover label {
			color: #fff;
		}

nav ul ul li:active label {
			color: #aaa;
		}

nav ul li a {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 0px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}
		nav ul ul li label {
			padding: 0px 10px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
			nav ul ul li label:hover {
				background: #4b545f;
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

.slider {
  width: 200px; opacity: 0.8;
  //margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
//  width: 100%;
  width: 200px;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 40px;
  height: 18px;
  border-radius: 12px;
  border: 0;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
   #divAds {position: absolute; top: 0px; left: 0px; width: 730px; height: 90px; z-index: 4; visibility: hidden}
   #divLogo {position: absolute; top: 91px; left: 0px; visibility: hidden}
      #imgLogo1 {position: absolute; top: 0px; left: 0px}
   #divNavigate {position: fixed; left: -200px; top: 400px; z-index: 4; visibility: hidden}
      #tableNavigate {background-color: transparent}
   #divMenuShow {position: fixed; z-index: 11; top: 0px; left: 0px; visibility: hidden; z-index: 10}
      #btnMenuShow              {position: absolute; top:  0px; left:   3px; height: 25px; visibility: hidden}

#divMenu {position: fixed; z-index: 10; top: 0px; left: 0px; visibility: hidden; z-index: 11}
      #btnMenuHide              {position: absolute; top:  0px; left:   3px; height: 25px}
      #btnFileMenu              {position: absolute; top:  0px; left:   40px; height: 25px}
         #btnSaveAsMenu         {position: absolute; top: 25px; left:  45px; width: 150px; height: 25px; text-align: left}
         #btnScreenShotsMenu    {position: absolute; top: 50px; left:  45px; height: 25px; width: 150px; text-align: left}
         #btnCollisionLogMenu   {position: absolute; top: 75px; left:  45px; height: 25px; width: 150px; text-align: left}

#btnObjectsMenu              {position: absolute; top:  0px; left:  80px; height: 25px}
         #btnCreateObjectsMenu     {position: absolute; top: 25px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnClonesMenu            {position: absolute; top: 50px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnImportObjectsLiteMenu     {position: absolute; top: 75px; left:  85px; height: 25px; width: 200px; text-align: left}
         //#btnImportObjectsMenu     {position: absolute; top: 100px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnEditObjectsVectorsMenu{position: absolute; top: 100px; left:  85px; height: 25px; width: 200px; text-align: left}
        #btnEditObjectsElementsMenu{position: absolute; top: 125px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnVectorMenu            {position: absolute; top: 150px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnDeleteObjectsMenu     {position: absolute; top: 175px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnPreTrailsMenu         {position: absolute; top: 200px; left:  85px; height: 25px; width: 200px; text-align: left}
      #btnTimeMenu              {position: absolute; top: 0px;  left: 150px; height: 25px}
         #btnCalendarDate       {position: absolute; top: 25px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnCalendarDateUTC    {position: absolute; top: 50px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnJulianDate         {position: absolute; top: 75px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnTimeStepMenu       {position: absolute; top: 100px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnSetDateAndTimeMenu {position: absolute; top: 125px; left: 155px; height: 25px; width: 170px; text-align: left}

#btnDisplayMenu           {position: absolute; top:  0px; left: 200px; height: 25px; visibility = 'visible'}
         #btnScreensMenu        {position: absolute; top: 25px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnToFromAMenu        {position: absolute; top: 50px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnToFromBMenu        {position: absolute; top: 75px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnRotatingFrameMenu  {position: absolute; top: 100px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnStereoMenu         {position: absolute; top: 125px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCitiesAMenu        {position: absolute; top: 150px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCitiesBMenu        {position: absolute; top: 175px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnStarsMenu          {position: absolute; top: 200px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCameraAMenu        {position: absolute; top: 225px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnLargePlayMenu      {position: absolute; top: 250px; left:  205px; height: 25px; width: 200px; text-align: left}

#btnPreferencesMenu       {position: absolute; top: 0px; left: 270px; height: 25px}
         #btnScreensMenu        {position: absolute; top: 25px; left:  205px; height: 25px; width: 200px; text-align: left}

#btnAutopilotMenu         {position: absolute; top: 0px; left: 375px; height: 25px}
         #btnAPsingleEventsMenu   {position: absolute; top: 25px; left:  380px; height: 25px; width: 150px; text-align: left}
         #btnAPperIterationMenu    {position: absolute; top: 50px; left:  380px; height: 25px; width: 150px; text-align: left}
         #btnAPperGraphicUpdateMenu{position: absolute; top: 75px; left:  380px; height: 25px; width: 150px; text-align: left}

#btnHelpMenu              {position: absolute; top: 0px; left: 455px; height: 25px}
         #btnSimulationDescriptionMenu   {position: absolute; top: 25px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnQuickHelpMenu   {position: absolute; top: 50px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnManualMenu   {position: absolute; top: 75px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnAboutMenu   {position: absolute; top: 100px; left:  460px; height: 25px; width: 150px; text-align: left}

//#divPerspective {position: absolute; z-index: 1; top:1250px; left:0px; width:1250px; height:900px;}
   //#divPerspective {position: absolute; z-index: 1; top:1250px; left: 0px}
   #divPerspective {position: absolute; z-index: 1}
   #divTopDown {position: absolute; z-index: 1; top: 0px; left: 0px; width:1250px; height:900px;}

#divRotateCameraA {top: 800px; left: 0px; height: 125px; width: 570px}
      #lblRotateCameraATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnRotateCameraAClose {position: absolute; left: 550px}

#rangeRotateCameraA {position: absolute; top:  25px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraA {position: absolute; top: 25px; left: 455px; width: 45px}
      #lblRotateCameraA {position: absolute; top: 29px; left: 505px}

#rangeRotateCameraZ {position: absolute; top: 50px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraZ {position: absolute; top: 50px; left: 455px; width: 45px}
      #lblRotateCameraZ {position: absolute; top: 54px; left: 505px}

#rangeRotateCameraD {position: absolute; top: 75px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraD {position: absolute; top: 75px; left: 455px; width: 45px}
      #lblRotateCameraD {position: absolute; top: 79px; left: 505px}

#selectTargetObjectRF {position: absolute; top: 100px; left: 1px; max-width: 100px; z-index: 2;}
      #lblLonPlus {position: absolute; top: 104px; left: 107px}
      #txtLongitudeRF {position: absolute; top: 100px; left: 117px; width: 40px;}

#radioTrueLongitude {position: absolute; top: 100px; left:  170px; z-index: 2;}
      #lblTrueLongitude   {position: absolute; top: 104px; left: 192px; z-index: 2;}

#radioMeanLongitude {position: absolute; top: 100px; left:  220px; z-index: 2;}
      #lblMeanLongitude   {position: absolute; top: 104px; left: 242px; z-index: 2;}

#checkAxes {position: absolute; top: 100px; left:  262px; z-index: 2;}
      #lblAxes   {position: absolute; top: 104px; left: 282px; z-index: 2;}

#checkStereoCA {position: absolute; top: 100px; left:  312px; z-index: 2;}
      #lblStereoCA   {position: absolute; top: 104px; left: 332px; z-index: 2;}

#checkKeplerCA {position: absolute; top: 100px; left:  357px; z-index: 2;}
      #lblKeplerCA   {position: absolute; top: 104px; left: 377px; z-index: 2;}

#checkTrailsCA {position: absolute; top: 100px; left:  427px; z-index: 2;}
      #lblTrailsCA   {position: absolute; top: 104px; left: 447px; z-index: 2;}

#checkLabelsCA {position: absolute; top: 100px; left:  497px; z-index: 2;}
      #lblLabelsCA   {position: absolute; top: 104px; left: 517px; z-index: 2;}

#divTimeStep {top: 30px; left: 260px; height: 54px;}
      #lblTimeStepTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnPause {position: absolute; top: 25px; left: 3px}
      #btnTimeStepPlus {position: absolute; top: 26px; left: 37px}
      #spanTimeStep {position: absolute; top: 25px; left: 64px; width: 80px}
      #btnTimeStepMinus {position: absolute; top: 26px; left: 180px}

#btnTimeDirection {position: absolute; top: 25px; left: 210px}

#btnTimeStepClose {position: absolute}

#divDistanceAndSpeedA {top:120px; left: 0px; height: 70px; visibility: hidden}
      #lblDistanceAndSpeedATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #selectTargetObjectDSa {position: absolute; top: 45px; left: 1px; z-index: 2;}
      #selectReferenceObjectDSa {position: absolute; top: 45px; left: 1px; z-index: 2;}
      #lblDSaDistanceA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDSaSpeedA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDStangentialA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDSradialA  {position: absolute; top: 25px; left: 3px; width: 160px;}

#divCalendarDate {top:120px; left: 0px; height: 70px; visibility: hidden}
      #lblCalendarLocalTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanCalendarDate{position: absolute; top: 30px; left: 3px;}
      #btnCalendarDateClose {position: absolute;}

#divCalendarDateUTC {top:30px; left: 0px; height: 70px;}
      #lblCalendarUTC {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanCalendarDateUTC{position: absolute; top: 30px; left: 3px;}
      #btnCalendarDateUTCClose {position: absolute;}

#divJulianDate {top: 200px; left: 0px; height: 54px; visibility: hidden}
      #lblJulianDateTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanJulianDate{position: absolute; top: 30px; left: 3px;} 
      #btnJulianDateClose {position: absolute;}

#divSetTime {top: 90px; left: 300px; height: 180px; visibility: hidden}
      #lblSetTimeTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #lblSetTimeDateAndTime  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #txtSetDateAndTime {position: absolute; top: 50px; left: 3px; width: 160px;}
      #btnSetTimeOK {position: absolute; top:130px; left: 3px; width: 50px;}
      #btnSetTimeClose{position: absolute;}

#divEditObjectsVectors {top: 90px; left: 300px; height: 606px; visibility: hidden}
      #lblEditObjectsVectorsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnEditObjectsVectorsClose{position: absolute;}

#lblSelectTargetObjectEOV {position: absolute; top: 30px; left: 1px}
      #selectTargetObjectEOV {position: absolute; top: 45px; left: 1px; z-index: 2;}

#lblSelectReferenceObjectEOV {position: absolute; top: 80px; left: 1px}
      #selectReferenceObjectEOV {position: absolute; top: 95px; left: 1px; z-index: 2;}

#lblEOVSelectName {position: absolute; top: 125px; left: 1px}
      #txtEOVName {position: absolute; top: 140px; left: 1px}

#lblEditObjectsVectorsColor {position: absolute; top: 180px; left: 1px; width: 60px}
      #txtEditObjectsVectorsColor {position: absolute; top: 195px; left: 1px; width: 60px}

#lblEditObjectsVectorsShadow {position: absolute; top: 180px; left: 63px; width: 60px}
      #txtEditObjectsVectorsShadow {position: absolute; top: 195px; left: 63px; width: 60px}

#lblEditObjectsVectorsLabel {position: absolute; top: 180px; left: 125px; width: 60px}
      #txtEditObjectsVectorsLabel {position: absolute; top: 195px; left: 125px; width: 60px}

#lblEditObjectsVectorsTrail {position: absolute; top: 225px; left: 1px; width: 60px}
      #txtEditObjectsVectorsTrail {position: absolute; top: 240px; left: 1px; width: 60px}

#lblEditObjectsVectorsSubZ {position: absolute; top: 225px; left: 63px; width: 60px}
      #txtEditObjectsVectorsSubZ {position: absolute; top: 240px; left: 63px; width: 60px}

#lblEditObjectsVectorMass {position: absolute; top: 275px; left: 1px}
      #btnEditObjectsVectorMassUnits {position: absolute; top: 270px; left: 60px}
      #txtEditObjectsVectorsMass {position: absolute; top: 290px; left: 1px}

#lblEditObjectsVectorDiameter {position: absolute; top: 325px; left: 1px}
      #btnEditObjectsVectorDiameterUnits {position: absolute; top: 320px; left: 60px}
      #txtEditObjectsVectorsDiameter {position: absolute; top: 340px; left: 1px}

#lblEditObjectsVectorLocation {position: absolute; top: 385px; left: 1px; width: 120px}
      #btnEditObjectsVectorPositionUnits {position: absolute; top: 380px; left: 135px}
      #txtEditObjectsVectorsX {position: absolute; top: 400px; left: 1px}
      #txtEditObjectsVectorsY {position: absolute; top: 420px; left: 1px}
      #txtEditObjectsVectorsZ {position: absolute; top: 440px; left: 1px}

#lblEditObjectsVectorVelocity {position: absolute; top: 485px; left: 1px; width: 120px}
      #btnEditObjectsVectorVelocityUnits {position: absolute; top: 480px; left: 135px}
      #txtEditObjectsVectorsVx {position: absolute; top: 500px; left: 1px}
      #txtEditObjectsVectorsVy {position: absolute; top: 520px; left: 1px}
      #txtEditObjectsVectorsVz {position: absolute; top: 540px; left: 1px}

#btnEditObjectsVectorsApply  {position: absolute; top: 580px; left: 1px}
      #btnEditObjectsVectorsDelete {position: absolute; top: 580px; left: 85px}

#divEditObjectsElements {top: 90px; left: 300px; height: 606px; visibility: hidden}
      #lblEditObjectsElementsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnEditObjectsElementsClose{position: absolute;}

#lblSelectTargetObjectEOE {position: absolute; top: 30px; left: 1px}
      #selectTargetObjectEOE {position: absolute; top: 45px; left: 1px; z-index: 2;}

#lblSelectReferenceObjectEOE {position: absolute; top: 80px; left: 1px}
      #selectReferenceObjectEOE {position: absolute; top: 95px; left: 1px; z-index: 2;}

#lblEOESelectName {position: absolute; top: 125px; left: 1px}
      #txtEOEName {position: absolute; top: 140px; left: 1px}

#lblEditObjectsElementsColor {position: absolute; top: 180px; left: 1px; width: 60px}
      #txtEditObjectsElementsColor {position: absolute; top: 195px; left: 1px; width: 60px}

#lblEditObjectsElementsShadow {position: absolute; top: 180px; left: 63px; width: 60px}
      #txtEditObjectsElementsShadow {position: absolute; top: 195px; left: 63px; width: 60px}

#lblEditObjectsElementsLabel {position: absolute; top: 180px; left: 125px; width: 60px}
      #txtEditObjectsElementsLabel {position: absolute; top: 195px; left: 125px; width: 60px}

#lblEditObjectsElementsTrail {position: absolute; top: 225px; left: 1px; width: 60px}
      #txtEditObjectsElementsTrail {position: absolute; top: 240px; left: 1px; width: 60px}

#lblEditObjectsElementsSubZ {position: absolute; top: 225px; left: 63px; width: 60px}
      #txtEditObjectsElementsSubZ {position: absolute; top: 240px; left: 63px; width: 60px}

#lblEditObjectsElementsMass {position: absolute; top: 275px; left: 1px}
      #btnEditObjectsElementsMassUnits {position: absolute; top: 270px; left: 60px}
      #txtEditObjectsElementsMass {position: absolute; top: 290px; left: 1px}

#lblEditObjectsElementsDiameter {position: absolute; top: 325px; left: 1px}
      #btnEditObjectsElementsDiameterUnits {position: absolute; top: 320px; left: 60px}
      #txtEditObjectsElementsDiameter {position: absolute; top: 340px; left: 1px}

#lblEditObjectsElementsLocation {position: absolute; top: 385px; left: 1px; width: 120px}
      #btnEditObjectsElementsPositionUnits {position: absolute; top: 400px; left: 156px}
      #txtEditObjectsElementsX {position: absolute; top: 400px; left: 1px; width: 150px}
      #txtEditObjectsElementsY {position: absolute; top: 420px; left: 1px; width: 150px}
      #txtEditObjectsElementsZ {position: absolute; top: 440px; left: 1px; width: 150px}

#lblEditObjectsElementsVelocity {position: absolute; top: 485px; left: 1px; width: 120px}
      #txtEditObjectsElementsVx {position: absolute; top: 500px; left: 1px; width: 150px}
      #txtEditObjectsElementsVy {position: absolute; top: 520px; left: 1px; width: 150px}
      #txtEditObjectsElementsVz {position: absolute; top: 540px; left: 1px; width: 150px}

#btnEditObjectsElementsApply  {position: absolute; top: 580px; left: 1px}
      #btnEditObjectsElementsDelete {position: absolute; top: 580px; left: 85px}

#divStars {top:30px; left: 260px; height: 360px; visibility: hidden;}
      #lblStarsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnStarsClose {position: absolute;}

#lblSelectStars {position: absolute; top: 30px; left: 1px}
      #selectStars {position: absolute; top: 45px; left: 1 px; z-index: 2}
      #lblStarBrightness{position: absolute; top: 75px; left: 1px}
      #txtStarBrightness{position: absolute; top: 90px; left: 1px}

#hrStars{position: absolute; top: 120px; width: 100%}
      #checkRaDec {position: absolute; top: 140px; left: 3px; z-index: 2}
      #lblRaDec {position: absolute; top: 143px; left: 24px; width: 90px; z-index: 2;}

#lblGridBrightness {position: absolute; top: 163px; left:1px;}
      #txtGridBrightness {position: absolute; top: 178px; left: 1px}

#lblRaSpacing {position: absolute; top: 208px; left: 1px}
      #txtRaSpacing {position: absolute; top: 223px; left: 1px}

#lblDecSpacing {position: absolute; top: 253px; left: 1px}
      #txtDecSpacing {position: absolute; top: 268px; left: 1px}

#lblGridColor {position: absolute; top: 298px; left: 1px}
      #txtGridColor {position: absolute; top: 313px; left: 1px}

#divRotatingFrame {top:30px; left: 260px; height: 330px; visibility: hidden;}
      #lblRotatingFrameTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnRotatingFrameClose {position: absolute;}

#lblTargetObjectRF {position: absolute; top: 20px; left: 0px; z-index: 2;}

#lblReferenceObjectRF {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectReferenceObjectRF {position: absolute; top: 90px; left: 0px; z-index: 2;}

#lblLongitudeRF {position: absolute; top: 120px; left: 0px; z-index: 2;}

#lblAltitudeRF {position: absolute; top: 170px; left: 0px; z-index: 2;}
      #txtAltitudeRF {position: absolute; top: 190px; left: 3px; width: 160px;}

#lblDistanceRF {position: absolute; top: 220px; left: 0px; z-index: 2;}
      #txtDistanceRF {position: absolute; top: 240px; left: 3px; width: 160px;}

#checkRF {position: absolute; top: 270px; left: 3px; z-index: 2;}

#divLargerPlayButton {position: fixed; top: 0px; left: 0px; visibility: hidden; z-index: 2}
      #btnLargerPlayButton{position: absolute; top: 300px; background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/playButton.png'); z-index: 3;}

#btnCreatePreTrails {position: absolute; top: 210px; left: 20px}

#divCitiesA{top: 30px; left:500px; height: 200px; visibility: hidden}
      #lblCitiesTitleA {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCitiesCloseA {position: absolute}
      #selectCitiesA       {position: absolute; top: 40px;  left: 0px; z-index: 2}
      #lblLatitudeCitiesA   {position: absolute; top: 85px;  left: 0px; z-index: 2}
      #txtLatitudeCitiesA   {position: absolute; top: 105px; left: 0px; z-index: 2}
      #lblLongitudeCitiesA  {position: absolute; top: 140px; left: 0px; z-index: 2}
      #txtLongitudeCitiesA  {position: absolute; top: 165px; left: 0px; z-index: 2}

#divCitiesB{top: 30px; left:500px; height: 200px; visibility: hidden}
      #lblCitiesTitleB {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCitiesCloseB {position: absolute}
      #selectCitiesB       {position: absolute; top: 40px;  left: 0px; z-index: 2}
      #lblLatitudeCitiesB   {position: absolute; top: 85px;  left: 0px; z-index: 2}
      #txtLatitudeCitiesB   {position: absolute; top: 105px; left: 0px; z-index: 2}
      #lblLongitudeCitiesB  {position: absolute; top: 140px; left: 0px; z-index: 2}
      #txtLongitudeCitiesB  {position: absolute; top: 165px; left: 0px; z-index: 2}

#divToFromA {top:30px; left: 260px; height: 490px; visibility: hidden}
      #lblToFromATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnToFromAClose {position: absolute;}

#lblTargetObjectA {position: absolute; top: 20px; left: 0px; z-index: 2;}
      #selectTargetObjectA {position: absolute; top: 40px; left: 0px; z-index: 2;}

#lblCameraObjectA {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectCameraObjectA {position: absolute; top: 90px; left: 0px; z-index: 2;}

#spanBarycenterCheckBoxA {position: absolute; top: 120px; left: 0px; width: 90px; z-index: 2;}
      #checkBarycenterPerspectiveA {position: absolute; top: 120px; left: 100px; z-index: 2;}

#lblMinimumObjectSizeA {position: absolute; top: 150px; left: 0px; z-index: 2;}
      #txtMinimumObjectSizeA {position: absolute; top: 170px; left: 0px; z-index: 2;}

#lblTrailSizeA {position: absolute; top: 200px; left: 0px; z-index: 2;}
      #txtTrailSizeA {position: absolute; top: 220px; left: 0px; z-index: 2}

#lblZoomA {position: absolute; top:246px; left: 0px; z-index:2}
      #pZoomInA {position: absolute; top: 270px; left: 0px; z-index:2}
      #txtFOVa  {position: absolute; top:270px; left: 30px; z-index:2}
      #pZoomOutA {position: absolute; top: 270px; left: 180px; z-index:2}

#checkStarsA {position: absolute; top: 310px; left: 0px; z-index: 2;}
      #lblStarsA {position: absolute; top: 310px; left: 20px; width: 90px; z-index: 2;}

#checkStarsLabelsA {position: absolute; top: 335px; left: 0px; z-index: 2;}
      #lblStarsLabelsA {position: absolute; top: 335px; left: 20px; width: 90px; z-index: 2;}

#checkKBOsA {position: absolute; top: 360px; left: 0px; z-index: 2;}
      #lblKBOsA {position: absolute; top: 360px; left: 20px; width: 90px; z-index: 2;}

#checkPreTrailsA {position: absolute; top: 385px; left: 0px; z-index: 2;}
      #lblPreTrailsA {position: absolute; top: 385px; left: 20px; width: 90px; z-index: 2;}

#checkCrescentsA {position: absolute; top: 410px; left: 0px; z-index: 2;}
      #lblCrescentsA {position: absolute; top: 410px; left: 20px; width: 90px; z-index: 2;}

#checkSunGraphicA {position: absolute; top: 435px; left: 0px; z-index: 2;}
      #lblSunGraphicA {position: absolute; top: 435px; left: 20px; width: 90px; z-index: 2;}

#checkLabelsA    {position: absolute; top: 460px; left: 0px;}
      #lblLabelsA {position: absolute; top: 460px; left: 20px}
      #txtFontA {position: absolute; top: 460px; left:  80px;}

#divToFromB {top:330px; left: 260px; height: 294px; visibility: hidden;}
      #lblToFromBTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnToFromBClose {position: absolute;}

#lblTargetObjectB{position: absolute; top: 20px; left: 0px; z-index: 2;}
      #selectTargetObjectB {position: absolute; top: 40px; left: 0px; z-index: 2;}

#lblCameraObjectB {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectCameraObjectB {position: absolute; top: 90px; left: 0px; z-index: 2;}

#spanBarycenterCheckBoxB {position: absolute; top: 120px; left: 0px; width: 90px; z-index: 2;}
      #checkBarycenterPerspectiveB {position: absolute; top: 120px; left: 100px; z-index: 2;}

#lblMinimumObjectSizeB {position: absolute; top: 150px; left: 0px; z-index: 2;}
      #txtMinimumObjectSizeB {position: absolute; top: 170px; left: 0px; z-index: 2;}

#lblTrailSizeB {position: absolute; top: 200px; left: 0px; z-index: 2;}
      #txtTrailSizeB {position: absolute; top: 220px; left: 0px; z-index: 2}

#lblZoomB {position: absolute; top:246px; left: 0px; z-index:2}
      #pZoomInB {position: absolute; top: 270px; left: 0px; z-index:2}
      #txtFOVb  {position: absolute; top:270px; left: 30px; z-index:2}
      #pZoomOutB {position: absolute; top: 270px; left: 180px; z-index:2}

#checkStarsB {position: absolute; top: 310px; left: 0px; z-index: 2;}
      #lblStarsB {position: absolute; top: 310px; left: 20px; width: 90px; z-index: 2;}

#checkStarsLabelsB {position: absolute; top: 335px; left: 0px; z-index: 2;}
      #lblStarsLabelsB {position: absolute; top: 335px; left: 20px; width: 90px; z-index: 2;}

#checkKBOsB {position: absolute; top: 360px; left: 0px; z-index: 2;}
      #lblKBOsB {position: absolute; top: 360px; left: 20px; width: 90px; z-index: 2;}

#checkPreTrailsB {position: absolute; top: 385px; left: 0px; z-index: 2;}
      #lblPreTrailsB {position: absolute; top: 385px; left: 20px; width: 90px; z-index: 2;}

#checkCrescentsB {position: absolute; top: 410px; left: 0px; z-index: 2;}
      #lblCrescentsB {position: absolute; top: 410px; left: 20px; width: 90px; z-index: 2;}

#checkSunGraphicB {position: absolute; top: 435px; left: 0px; z-index: 2;}
      #lblSunGraphicB {position: absolute; top: 435px; left: 20px; width: 90px; z-index: 2;}

#checkLabelsB    {position: absolute; top: 460px; left: 0px;}
      #lblLabelsB {position: absolute; top: 460px; left: 20px}
      #txtFontB {position: absolute; top: 460px; left:  80px;}

#divScreenShotImage {top:200px; left: 600px; width: 300px; height: 200px; visibility: hidden;}
      #lblScreenShotImageTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnScreenShotImageClose {position: absolute; left: 275px; z-index: 2}
      #imgScreenShotImage {position: absolute; top: 0px; left: 0px; width: 298px; height: 198px}

#divOutputFile {top:200px; left: 600px; width: 300px; height: 200px; visibility: hidden;}
      #checkCreateDataFile{}
      #lblSampleEvery{}
      #txtSampleEvery{}

#lblMaxDataSamples{}
      #txtMaxDataSamples{}

#checkDataSma{}
      #checkDataEcc{}
      #checkDataInc{}
      #checkDataNode{}
      #checkDataPeri{}
      #checkDataMa{}
      #checkDataRx{}
      #checkDataRy{}
      #checkDataRz{}
      #checkDataVx{}
      #checkDataVy{}
      #checkDataVz{}
      #selectDataObjects{}

#divQuickHelp {top:200px; left: 600px; width: 200px; height: 300px; visibility: hidden}
      #lblQuickHelpTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnQuickHelpClose {position: absolute; left: 180px}
      #txtAreaQuickHelp {position: absolute; top: 20px; left: 1px; width: 198px; height: 298px}

#divAPsingleEvents {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPsingleEventsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPsingleEventsClose {position: absolute; left: 380px}
      #txtAreaAPsingleEvents {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPsingleEventsUpdate {position: absolute; top: 340px; left: 1px}

#divAPperIteration {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPperIterationTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPperIterationClose {position: absolute; left: 380px}
      #txtAreaAPperIteration {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPperIterationUpdate {position: absolute; top: 340px; left: 1px}

#divAPperGraphicUpdate {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPperGraphicUpdateTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPperGraphicUpdateClose {position: absolute; left: 380px}
      #txtAreaAPperGraphicUpdate {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPperGraphicUpdateUpdate {position: absolute; top: 340px; left: 1px}

#divScreenShots {top:200px; left: 600px; height: 560px; visibility: hidden;}
      #lblScreenShotsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnScreenShotsClose {position: absolute;}

#btnTakeScreenShots {position: absolute; top: 28px; left: 0px;}

#lblScreenShotsDimensions {position: absolute; top: 108px; left: 0px}
      #txtScreenShotDimensions {position: absolute; top: 128px; left: 0px}

#checkScreenShotsCls{position: absolute; top:158px; left: 0px}
      #lblScreenShotsCls{position: absolute; top: 158px; left: 25px}

#checkScreenShotsAforeground{position: absolute; top: 188px; left: 0px;}
      #lblscreenShotsAforeground{position: absolute; top: 188px; left: 25px;}

#checkScreenShotsAbackground{position: absolute; top: 218px; left: 0px;}
      #lblscreenShotsAbackground{position: absolute; top: 218px; left: 25px;}

#lblScreenShotsAposition {position: absolute; top: 248px; left: 0px}
      #txtScreenShotsAposition {position: absolute; top: 268px; left: 0px}

#checkScreenShotsBforeground{position: absolute; top: 298px; left: 0px;}
      #lblscreenShotsBforeground{position: absolute; top: 298px; left: 25px;}

#checkScreenShotsBbackground{position: absolute; top: 328px; left: 0px;}
      #lblscreenShotsBbackground{position: absolute; top: 328px; left: 25px;}

#lblScreenShotsBposition {position: absolute; top: 358px; left: 0px}
      #txtScreenShotsBposition {position: absolute; top: 378px; left: 0px}

#lblScreenShotData {position: absolute; top:408px; left: 0px}

#divPreferences {top:20px; left: 100px; height: 360px; visibility: hidden}
      #lblPreferencesTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnPreferencesClose {position: absolute;}

#lblDoEvents {position: absolute; top: 28px; left: 0px}
      #txtDoEvents {position: absolute; top: 48px; left: 0px}

#lblSelectIntegrator {position: absolute; top: 85px; left: 0px;}
      #selectIntegrator {position: absolute; top: 105px; left: 0px; z-index: 2;}

#lblStepsPerRadian {position: absolute; top: 135px; left: 0px;}
      #txtStepsPerRadian {position: absolute; top: 165px; left: 0px;}
      #lblEventsDuration {position: absolute; top: 200px; left: 0px}
      #txtEventsDuration {position: absolute; top: 220px; left: 0px}

#lblOpacity {position: absolute; top: 255px; left: 0px}
      #txtOpacity {position: absolute; top: 270px; left: 0px}

#checkMedia {position: absolute; top: 300px; left: 1px}
      #lblMedia {position: absolute; top: 300px; left: 20px}

#checkRealTime {position: absolute; top: 330px; left: 1px}
      #lblRealTime {position: absolute; top: 330px; left: 20px}

#divCollisionLog {top:20px; left: 100px; height: 75px; width: 580px; visibility: hidden}
      #lblCollisionLogTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCollisionLogClose {position: absolute; left: 558px}
      #txtAreaCollisionLog {position: absolute; top: 20px; left: 1px; width: 578px; height: 54px;}

#divSimulationDescription {top:20px; left: 150px; height: 75px; width: 580px; visibility: hidden}
      #lblSimulationDescriptionTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnSimulationDescriptionClose {position: absolute; left: 558px}
      #txtAreaSimulationDescription {position: absolute; top: 20px; left: 1px; width: 578px; height: 54px;}

#divScreens {position: fixed; z-index: 2; top:200px; left: 600px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none;  visibility: hidden;}

#divEccentricity {position: absolute; z-index: 2; top:10px; left: 555px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none; visibility: hidden;}
   #divSMA {position: absolute; z-index: 2; top:60px; left: 555px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none; visibility: hidden;}

#divVectors {top:30px; left: 350px; width: 170px; height: 420px; visibility: hidden;}
      #lblVectorsTitle{position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnVectorsClose {position: absolute; left: 150px}
      #selectvectorObj1A {position: absolute; top: 25px;  left: 1px; z-index: 2}
      #selectvectorObj2A {position: absolute; top: 45px;  left: 1px; z-index: 2}

#btnPositionUnits {position: absolute; top: 75px; left: 1px; width: 150px}
      #txtObjx {position: absolute; top:95px; left: 1px}
      #txtObjy {position: absolute; top:115px; left: 1px}
      #txtObjz {position: absolute; top:135px; left: 1px}

#btnVelocityUnits {position: absolute; top:165px; left: 1px; width: 150px}
      #txtObjvx {position: absolute; top:185px; left: 1px}
      #txtObjvy {position: absolute; top: 205px; left: 1px}
      #txtObjvz {position: absolute; top: 225px; left: 1px}

#lblDistanceAndSpeed {position: absolute; top:255px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #txtDistance{position: absolute; top: 280px; left: 1px}
      #txtSpeed{position: absolute; top: 300px; left: 1px}

#spanTangentialSpeedVectors {position: absolute; top: 330px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #lblTangentialSpeedVectors {position: absolute; top: 355px; left: 1px}

#spanRadialVelocityVectors {position: absolute; top: 380px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #lblRadialVelocityVectors {position: absolute; top: 400px; left: 1px}

#divFocusObject {position: fixed; z-index: 2; top:680px; left: 20px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none;  visibility: hidden;}

#divCreateObjects {top:200px; left: 600px; width: 650px; height: 460px; visibility: hidden;}
      #lblCreateObjectsTitle{position: absolute; top: 0px; left: 0px; width: 650px; z-index: 2;}
      #btnCreateObjectsClose {position: absolute; left: 630px}
      #tblCreateObjects {position: absolute; left: 0px; top: 30px}
      #btnCreateObjects {position: absolute; left: 0px; top: 430px; z-index: 3;}

#divClones {top: 200px; left:300px; height: 450px; width: 920px; visibility: hidden}
      #lblClonesTitle{position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnClonesClose {position: absolute; left: 900px}

#lblClonesPaste {position: absolute; top: 30px; left: 0px;}
      #txtClonesPaste {position: absolute; top: 50px; left: 0px;}
      #btnClonesPaste {position: absolute; top: 75px; left: 0px;}
      #tableCloneElements {position: absolute; top: 105px; left: 0px;}
      #tableCloneCovarianceMatrix {position: absolute; top: 225px; left: 0px;}
      #btnCreateClones {position: absolute; top: 405px; left: 0px;}

#divSaveAs {top:200px; left: 600px; height: 698px; visibility: hidden}
      #lblSaveAsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}

#lblSaveAsFileName {position: absolute; top: 25px; left: 0px; z-index: 2;}
      #txtSaveAsFileName {position: absolute; top: 45px; left: 0px; z-index: 2;}

#lblSaveAsKeywords {position: absolute; top: 75px; left: 0px; z-index: 2;}
      #txtSaveAsKeywords {position: absolute; top: 95px; left: 0px; z-index: 2;}
      
      #lblSaveAsDescription {position: absolute; top: 125px; left: 0px; z-index: 2;}
      #txtAreaSaveAsDescription {position: absolute; top: 145px; left: 0px; width: 240px; height: 200px; z-index: 2;}

#lblSaveAsAuthor {position: absolute; top: 365px; left: 0px; z-index: 2;}
      #txtSaveAsAuthor {position: absolute; top: 385px; left: 0px; z-index: 2;}
   
      #lblSaveAsTempLink {position: absolute; top: 415px; left: 20px; z-index: 2;}
      #checkSaveAsTempLink {position: absolute; top: 415px; left: 0px; z-index: 2;}

#lblSaveAsShare {position: absolute; top: 435px; left: 20px; z-index: 2;}
      #checkSaveAsShare {position: absolute; top: 434px; left: 0px; z-index: 2;}

#btnSaveAs {position: absolute; top: 465px; left: 0px; z-index: 2;}

#lblSaveAsAddress {position: absolute; top: 495px; left: 0px; z-index: 2;}
      #spanSimURL {position: absolute; top: 515px; left: 0px; width: 245px; height: 60px z-index: 2;}

//#btnSaveAsNavigateTo {position: absolute; top:515px; left: 0px; z-index: 3;}

#lblSaveAsSourceCode {position: absolute; top: 595px; left: 0px; z-index: 2;}
      #txtAreaSaveAs {position: absolute; top:615px; left: 0px; width: 245px; height: 80px; z-index: 2;}

#btnSaveAsClose {position: absolute}

#divImportObjectsLite {top:210px; left: 600px; height: 110px; visibility: hidden}
      #lblImportObjectsLiteTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnImportObjectsLiteClose {position: absolute}
      #txtImportObjectsLite {position: absolute; top: 30px; left: 1px; width: 150px}
      #btnImportObjectsLite {position: absolute; top: 55px; left: 1px}
      #lblImportObjectsLite {position: absolute; top: 80px; left: 1px}
      #txtImportColor {position: absolute; top: 30px; left: 160px; width: 60px}

#divImportObjects {top:210px; left: 600px; width: 355px; height: 560px; visibility: hidden}
      #lblImportObjectsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnImportObjectsClose {position: absolute; left: 334px}
      #checkDeleteExistingObjects{position: absolute; left: 1px; top: 35px}
      #lblDeleteExistingObjects {position: absolute; left: 25px; top: 28px; width: 100px;}
      #lblImportSetTimeDateAndTime  {position: absolute; top: 30px; left: 130px; width: 165px;}
      #txtImportSetDateAndTime {position: absolute; top: 45px; left: 130px; width: 165px;}
      #btnImportNow {position: absolute; top: 45px; left:300px}

#divImportButtons {position: absolute; top: 80px; left: 1px: height: 100px}
      #txtAreaObjects {position: absolute; width: 350px; height: 300px; top: 215px}
      #btnImportObjects{position: absolute; top: 530px}

#divDeleteObjects {top:200px; left: 600px; height: 500px; visibility: hidden}
      #lblDeleteObjectsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnDeleteObjectsClose {position: absolute}
      #divDeleteList{position: absolute; top: 20px; left: 0px; width: 100%; height: 440px; overflow: scroll}
      #btnDeleteList{position: absolute; top: 466px; left: 1px;}
      #btnDeleteExistingObjects{position: absolute; top: 466px; left: 125px}

#divPreTrailObjectList {top:200px; left: 600px; height: 500px; visibility: hidden}
      #lblPreTrailObjectListTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #divPTOList{position: absolute; top: 20px; left: 0px; width: 100%; height: 440px; overflow: scroll}
      #btnPreTrailObject{position: absolute; top: 466px;}
      #btnPreTrailObjectListClose {position: absolute}

.classControlDiv {position: fixed; width: 250px; border: 1px solid blue; background-color: rgba(0,0,255,0.1); z-index: 2;}
   .classControlTitle {width: 100%; background-color: rgba(0, 0, 200, 0.8); color: white; font-family: Tahoma, Geneva, sans-serif; z-index: 2;}
   //.classLblData {color: cyan; background-color: Transparent; z-index: 2; border: none; opacity: 0.8}
   .classLblData {color: cyan; background-color: Transparent; font-family: 'Lucida Console', Monaco, monospace; font-size: 12px; z-index: 2; border: none; opacity:0.8}
 //.classTxtInput {color: white; background-color: rgba(12, 12, 12, 0.1); z-index: 2; border: none; opacity: 0.8}
   .classTxtInput {color: white; background-color: black; z-index: 2; opacity: 0.8}
   .classSelect   {color: black;  background-color: #888; z-index: 2; border: none; opacity: 0.8}

.classBtn {-webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               border-radius: 5px;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               background: transparent;
               opacity: 0.8;
               background-color: #000020;
               color: cyan;
               border-color: #3b8e92;
   }
   .classTxtColor {-webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               border-radius: 5px;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               background: transparent;
               opacity: 0.8;
               background-color: #000020;
               color: cyan;
               border-color: #3b8e92;
   }

.classBtnSmall { z-index: 3;
                    width: 20px; height: 20px;
                   -webkit-border-radius: 15px;
                   -moz-border-radius: 15px;
                    border-radius: 15px;
                   -webkit-border-radius: 15px;
                   -moz-border-radius: 15px;
                    background: transparent;
                    opacity: 0.8;
                    background-color: #000020;
                    color: cyan;
                    border-color: #3b8e92;
   }

.classBtnPlay2 { //delete me
height: 460px;
width: 460px;  
background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/playButton.png');
background-repeat:no-repeat;
}
   .classBtnPlay { z-index: 3;
                    width: 460px; height: 460px;
                    
                    background-repeat:no-repeat;
                   -webkit-border-radius: 150px;
                   -moz-border-radius: 150px;
                    border-radius: 150px;
                   -webkit-border-radius: 150px;
                   -moz-border-radius: 150px;
                    background: transparent;
                    opacity: 0.8;
                    background-color: #000020;
                    color: cyan;
                    border-color: #3b8e92;
   }

* {-webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
       box-sizing: border-box;
   }

.classTable{color: cyan; background-color:#111111; opacity: 0.8}

.classBtnUnit {
       width: 40px;
       color: cyan;
       background-color: Transparent;
       background-repeat:no-repeat;
       border: none;
       cursor:pointer;
       overflow: hidden;
       outline:none;
   }

.classMenuButton:hover {background: #383;}

.classBtnClose {
                    z-index: 3;
                    width: 20px; height: 20px; left: 228px; top: 0px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 5px;
                     border-radius: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                     background: transparent;
                     opacity: 0.8;
                     background-color: #000020;
                     color: red;
                     border-color: #928e3b;}

.classMenuButton {color: cyan; background-color: black; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; 
                      font-size: 16px; font-family: Geneva, Tahoma, Verdana, sans-serif; opacity: 0.8;
    }

#btnViewMenu {
       //position: absolute;
       //top: 3px;
       //left: 71px;
    }

//#lblLabelsA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreens {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreenShots {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreenWidth {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #spanScreenWidth {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblPreferences {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDoEvents {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblEventsDuration {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblUpdateGraphics {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblMinimumObjectSize {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDivEccentricity {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblEccentricity {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDivSMA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblSMA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblFocusObject {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}

#canvasPixels {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 0px;
      background-color:#000000;
   }

#foregroundLayer {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#canvasPixelsPerspectiveA {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 0px;
      background-color:#000000;
   }

#foregroundLayerPerspectiveA {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#trailLayerPerspectiveA {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#canvasPixelsPerspectiveB {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 5000px;
      background-color:#000000;
   }

#foregroundLayerPerspectiveB {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 5000px;
   }

#trailLayerPerspectiveB {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 5000px;
   }

//delete this one after all uses have been transfered to classBtnClose
   .btnClose {
      position: absolute;
      top: 0px;
      width: 15px;
      height: 15px;
      background-color: red;
      font-size: 8px;
      font-weight: bold;
      visibility: hidden;
   }

#btnEccentricityClose {left: 235px} 
   #btnSMAClose {left: 235px}

#divStereo {top: 660px; left: 4px; height: 165px; visibility: hidden}
         #lblStereoTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
         #checkStereo {position: absolute; top: 25px; left: 0px;}
         #lblStereo   {position: absolute; top: 25px; left: 22px;}

#radioCrosseye {position: absolute; top: 145px; left: 0px; }
         #lblRCrosseye   {position: absolute; top: 145px; left: 22px; }

#radioParallel {position: absolute; top: 125px; left: 0px;}
         #lblRParallel   {position: absolute; top: 125px; left: 22px; }

#txtBaseline   {position: absolute; top: 65px; left: 0px; z-index: 2; }
         #lblBaseline   {position: absolute; top: 85px; left: 0px; width:100px;}
         #btnStereoClose   {position: absolute;}
</style>
<script src="http://orbitsimulator.com/gravitySimulatorCloud/noStarsDynamic.js" type="text/javascript"></script></head>

<div class="classControlDiv ui-draggable" id="divStereo" style="left: 252px; top: 127px; visibility: hidden;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblStereoTitle">Stereo</label>
   <input id="checkStereo" onclick="stereo()" type="checkbox">
   <label class="classLblData" id="lblStereo" for="checkStereo">Stereo</label>

<input class="classTxtInput" id="txtBaseline" onkeydown="userTyping(true)" onkeyup="userTyping(false); changeBaseline(); moveB()" type="text" value="1">
   <label class="classLblData" id="lblBaseline">Baseline (deg)</label>

<input name="radioStereo" id="radioCrosseye" onclick="moveB()" type="radio" checked="checked">
   <label class="classLblData" id="lblRCrosseye" for="radioCrosseye">Crosseye</label>

<input name="radioStereo" id="radioParallel" onclick="moveB()" type="radio">
   <label class="classLblData" id="lblRParallel" for="radioParallel">Parallel</label>
   <input class="classBtnClose" id="btnStereoClose" onclick="hideMe('divStereo')" type="button" value="x">
</div>

<div class="classControlDiv ui-draggable" id="divEditObjectsVectors" style="left: 250px; top: 126px; visibility: hidden;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblEditObjectsVectorsTitle">Edit objects -- state vectors</label>
   <input class="classBtnClose" id="btnEditObjectsVectorsClose" onclick="hideMe('divEditObjectsVectors')" type="button" value="x">
   
   <label class="classLblData" id="lblSelectTargetObjectEOV">Object</label>
   <select class="classSelect" id="selectTargetObjectEOV" onchange="populateEditObjectsVectors(true)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">SpaceX Roadster (spacecraft) (-143205) {source: tesla_s5}
Center body name: Sun (10)

</option><option value="13">Camera A</option><option value="14">Camera B</option></select>

<label class="classLblData" id="lblSelectReferenceObjectEOV">Reference object</label>
   <select class="classSelect" id="selectReferenceObjectEOV" onchange="populateEditObjectsVectors(false)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">SpaceX Roadster (spacecraft) (-143205) {source: tesla_s5}
Center body name: Sun (10)

</option></select>

<label class="classLblData" id="lblEditObjectsVectorsColor">Color</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsColor" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsShadow">Shadow</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsShadow" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsLabel">Label</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsLabel" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsTrail">Trail</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsTrail" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorDiameter">Diameter</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorDiameterUnits" onclick="changeLengthUnitSmall('btnEditObjectsVectorDiameterUnits'); populateEditObjectsVectors(false)" type="button" value="(km)">
   <input class="classTxtInput" id="txtEditObjectsVectorsDiameter">

<label class="classLblData" id="lblEditObjectsVectorLocation">Location (<i>x,y,z</i>)</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorPositionUnits" onclick="changeLengthUnitLarge('btnEditObjectsVectorPositionUnits'); populateEditObjectsVectors(false)" type="button" value="(AU)">
   <input class="classTxtInput" id="txtEditObjectsVectorsX">
   <input class="classTxtInput" id="txtEditObjectsVectorsY">
   <input class="classTxtInput" id="txtEditObjectsVectorsZ">

<label class="classLblData" id="lblEditObjectsVectorVelocity">Velocity (<i>x,y,z</i>)</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorVelocityUnits" onclick="changeVelocityUnit('btnEditObjectsVectorVelocityUnits'); populateEditObjectsVectors(false)" type="button" value="(km/s)">
   <input class="classTxtInput" id="txtEditObjectsVectorsVx">
   <input class="classTxtInput" id="txtEditObjectsVectorsVy">
   <input class="classTxtInput" id="txtEditObjectsVectorsVz">

<div class="classControlDiv ui-draggable" id="divEditObjectsElements" style="left: 251px; top: 127px; visibility: hidden;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblEditObjectsElementsTitle">Edit objects -- orbital elements</label>
   <input class="classBtnClose" id="btnEditObjectsElementsClose" onclick="hideMe('divEditObjectsElements')" type="button" value="x">
   
   <label class="classLblData" id="lblSelectTargetObjectEOE">Object</label>
   <select class="classSelect" id="selectTargetObjectEOE" onchange="populateEditObjectsElements(true)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">SpaceX Roadster (spacecraft) (-143205) {source: tesla_s5}
Center body name: Sun (10)

</option><option value="13">Camera A</option><option value="14">Camera B</option></select>

<label class="classLblData" id="lblSelectReferenceObjectEOE">Reference object</label>
   <select class="classSelect" id="selectReferenceObjectEOE" onchange="populateEditObjectsElements(false)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">SpaceX Roadster (spacecraft) (-143205) {source: tesla_s5}
Center body name: Sun (10)

</option></select>

<label class="classLblData" id="lblEditObjectsElementsColor">Color</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsColor" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsShadow">Shadow</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsShadow" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsLabel">Label</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsLabel" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsTrail">Trail</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsTrail" style="color: rgb(0, 0, 0); background-image: none; background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsDiameter">Diameter</label>
   <input class="classBtnUnit" id="btnEditObjectsElementsDiameterUnits" onclick="changeLengthUnitSmall('btnEditObjectsElementsDiameterUnits'); populateEditObjectsElements(false)" type="button" value="(km)">
   <input class="classTxtInput" id="txtEditObjectsElementsDiameter">

<div class="classControlDiv ui-draggable" id="divRotateCameraA" style="left: 0px; top: 1px; visibility: visible;">
      <label class="classControlTitle" id="lblRotateCameraATitle">Camera A</label>
      <input class="classBtnClose" id="btnRotateCameraAClose" onclick="hideMe('divRotateCameraA')" type="button" value="x">

<input class="slider" id="rangeRotateCameraA" onchange="rotateCameraA()" type="range" min="0" max="6.2830" step="0.001" value="0">
      <input class="classTxtInput" id="txtRotateCameraA" onkeyup="cameraAoverride()" type="text" value="-999">
      <label title="Degrees" class="classLblData" id="lblRotateCameraA">Azimuth</label>

<input class="slider" id="rangeRotateCameraZ" onchange="rotateCameraA()" type="range" min="0.0175" max="3.124" step="0.001" value="0">
      <input class="classTxtInput" id="txtRotateCameraZ" onkeyup="cameraAoverride()" type="text" value="-888">
      <label title="Degrees" class="classLblData" id="lblRotateCameraZ">Altitude</label>

<input class="slider" id="rangeRotateCameraD" onchange="rotateCameraA()" type="range" min="6" max="100" step="0.1" value="0">
      <input class="classTxtInput" id="txtRotateCameraD" onkeyup="cameraAoverride()" type="text" value="-999">
      <label title="AU" class="classLblData" id="lblRotateCameraD">Distance</label>

<select title="Rotate with" class="classSelect" id="selectTargetObjectRF" onchange="changeRF()"><option value="0">Stationary</option><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">SpaceX Roadster (spacecraft) (-143205) {source: tesla_s5}
Center body name: Sun (10)

</option></select>
      <label class="classLblData" id="lblLonPlus">+</label>
      <input title="Phase shift" class="classTxtInput" id="txtLongitudeRF" onkeydown="userTyping(true)" onkeyup="userTyping(false); changeRF()" type="text">
      <input name="nameLongitude" id="radioTrueLongitude" onchange="changeRF()" type="radio" checked="checked">
      <label title="True longitude" class="classLblData" id="lblTrueLongitude" for="radioTrueLongitude">TL</label>

<input name="checkKeplerCA" id="checkKeplerCA" onclick="perspectiveTrails2ClsA(); perspectiveTrails2ClsB(); checkPreTrailsA.checked = checkKeplerCA.checked; checkPreTrailsB.checked = checkKeplerCA.checked;" type="checkbox">
      <label title="Superimpose Keplerian orbit" class="classLblData" id="lblKeplerCA" for="checkKeplerCA">Kepler</label>

<input name="checkTrailsCA" id="checkTrailsCA" onclick="perspectiveTrailsClsA(); perspectiveTrailsClsB()" type="checkbox">
      <label title="Create trails" class="classLblData" id="lblTrailsCA" for="checkTrailsCA">Trails</label>

<input name="checkLabelsCA" id="checkLabelsCA" onclick="checkLabelsA.checked = checkLabelsCA.checked; checkLabelsB.checked = checkLabelsCA.checked" type="checkbox">
      <label title="Labels" class="classLblData" id="lblLabelsCA" for="checkLabelsCA">Labels</label>

</div>

<div class="classControlDiv" id="divDistanceAndSpeedA" onmouseover="hideAllMenuButtons()" ui-draggable"="">
      <label class="classControlTitle" id="lblDistanceAndSpeedATitle">Distance and speed</label>
      <label class="classControlTitle" id="lblCalendarLocalTitle">Local time</label>
      <select class="classSelect" id="selectTargetObjectDSa"></select>
      <select class="classSelect" id="selectTargetObjectDSa"></select>
      <label class="classLblData" id="lblDSaDistanceA">
      <label class="classLblData" id="lblDSaSpeedA">
      <label class="classLblData" id="lblDStangentialA">
      <label class="classLblData" id="lblDSradialA">

</label></label></label></label></div>

<div class="classControlDiv ui-draggable" id="divCalendarDate" style="left: 821px; top: 1px; visibility: hidden;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblCalendarLocalTitle">Local time</label>
      <span class="classLblData" id="spanCalendarDate">Sun Feb 11 2018 08:46:27 GMT-0500 (Eastern Standard Time)</span>
      <label class="classControlTitle" id="lblCalendarLocalTitle">Local time</label>
   </div>

<div class="classControlDiv ui-draggable" id="divCalendarDateUTC" style="left: 570px; top: 1px; visibility: visible;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblCalendarUTC">Coordinated Universal Time</label>
      <span class="classLblData" id="spanCalendarDateUTC">Sun Feb 11 2018 13:46:27 (UTC)</span>
      <input class="classBtnClose" id="btnCalendarDateUTCClose" onclick="hideMe('divCalendarDateUTC')" type="button" value="x">
   </div>

<div class="classControlDiv ui-draggable" id="divJulianDate" style="left: 821px; top: 72px; visibility: hidden;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblJulianDateTitle">Julian Day</label>
      <span class="classLblData" id="spanJulianDate">2458161.0739272567</span>
      <input class="classBtnClose" id="btnJulianDateClose" onclick="hideMe('divJulianDate')" type="button" value="x">
   </div>

<label class="classLblData" id="lblSaveAsFileName">Simulation name:</label>
      <input class="classTxtInput" id="txtSaveAsFileName" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<label class="classLblData" id="lblSaveAsKeywords">Keywords (optional)</label>
      <input class="classTxtInput" id="txtSaveAsKeywords" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<label class="classLblData" id="lblSaveAsDescription">Description (optional)</label>
      <textarea id="txtAreaSaveAsDescription" onkeydown="userTyping(true)" onkeyup="userTyping(false)">Tesla SpaceX </textarea>
      
      <label class="classLblData" id="lblSaveAsAuthor">Author (optional)</label>
      <input class="classTxtInput" id="txtSaveAsAuthor" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<input id="checkSaveAsShare" onchange="if (checkSaveAsShare.checked) {checkSaveAsTempLink.checked = true}" type="checkbox">
      <label class="classLblData" id="lblSaveAsShare" for="checkSaveAsShare">Share on orbitsimulator.com</label>

<input id="checkSaveAsTempLink" onchange="if (checkSaveAsShare.checked) {checkSaveAsTempLink.checked = true}" type="checkbox" checked="">
      <label class="classLblData" id="lblSaveAsTempLink" for="checkSaveAsShare">Create temporary link</label>

<label class="classLblData" id="lblSaveAsAddress">Your simulation is here:</label>
      <span id="spanSimURL"></span>

<label class="classLblData" id="lblSaveAsSourceCode">Source code:</label>
      <textarea id="txtAreaSaveAs" onkeydown="userTyping(true)" onkeyup="userTyping(false)">&lt;!DOCTYPE html&gt;
&lt;html id ='htmlAll'&gt;
&lt;head&gt;
   &lt;title&gt;SpaceX Roadster&lt;/title&gt;
   &lt;meta name = 'keywords'    content = "Roadster 22018"&gt;
   &lt;meta name = 'description' content = "Tesla SpaceX "&gt;
   &lt;meta name = 'author' content = 'Tony Dunn, Robjohn53'&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset = UTF-8"&gt;

&lt;link href="http://orbitsimulator.com/gravitySimulatorCloud/jquery-ui.css" rel="stylesheet"&gt;
&lt;script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery-1.9.1.js"&gt;&lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery.ui.touch-punch.min2.js"&gt;&lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/kbo.js"&gt;                       &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/synthetic.js"&gt;                 &lt;/script&gt;
&lt;script id="scriptStars" src="http://orbitsimulator.com/gravitySimulatorCloud/noStars.js"&gt;                     &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/citiesLatLon.js"&gt;              &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jscolor.js"&gt;                   &lt;/script&gt;
&lt;script&gt;
   btndescout = new Image;btndescover= new Image;btndescout.src = "http://orbitsimulator.com/gravity/articles/descorange.GIF";btndescover.src = "http://orbitsimulator.com/gravity/articles/descyellow.GIF";
   btndownout = new Image;btndownover= new Image;btndownout.src = "http://orbitsimulator.com/gravity/articles/downorange.GIF";btndownover.src = "http://orbitsimulator.com/gravity/articles/downyellow.GIF";
   btnsimuout = new Image;btnsimuover= new Image;btnsimuout.src = "http://orbitsimulator.com/gravity/articles/simuorange.GIF";btnsimuover.src = "http://orbitsimulator.com/gravity/articles/simuyellow.GIF";
   btnmessout = new Image;btnmessover= new Image;btnmessout.src = "http://orbitsimulator.com/gravity/articles/messorange.GIF";btnmessover.src = "http://orbitsimulator.com/gravity/articles/messyellow.GIF";
   btnscieout = new Image;btnscieover= new Image;btnscieout.src = "http://orbitsimulator.com/gravity/articles/scieorange.GIF";btnscieover.src = "http://orbitsimulator.com/gravity/articles/scieyellow.GIF";
   btncontout = new Image;btncontover= new Image;btncontout.src = "http://orbitsimulator.com/gravity/articles/contorange.GIF";btncontover.src = "http://orbitsimulator.com/gravity/articles/contyellow.GIF";
   btnlinkout = new Image;btnlinkover= new Image;btnlinkout.src = "http://orbitsimulator.com/gravity/articles/linkorange.GIF";btnlinkover.src = "http://orbitsimulator.com/gravity/articles/linkyellow.GIF";
&lt;/script&gt;
&lt;style&gt;
nav ul ul {
	display: none;
}

nav ul li:hover &gt; ul {
		display: block;
	}

nav ul {z-index: 10; 
     font-family: Tahoma, Geneva, sans-serif; font-size: 20px;
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: fixed; top: -20px; left: 0px;
	//display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}

nav ul li:hover label {
			color: #fff;
		}

nav ul ul li:active label {
			color: #aaa;
		}

nav ul li a {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 0px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}
		nav ul ul li label {
			padding: 0px 10px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
			nav ul ul li label:hover {
				background: #4b545f;
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

.slider {
  width: 200px; opacity: 0.8;
  //margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
//  width: 100%;
  width: 200px;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android &lt;= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android &gt; 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}